<template>
  <div>
    <HelloWorld :title="msg">
      <!-- 
        希望, button 点我 能够获取到 HelloWorld 组件里面的 msg = HelloWorld
       -->
      <template v-slot:default="obj">
        <button>点我 {{ obj }} {{ obj.a }}</button>
      </template>
    </HelloWorld>

    <HelloWorld>
      <!-- 解构 -->
      <template v-slot="{ a }">
        <button>点我 {{ a }}</button>
      </template>
    </HelloWorld>

    <HelloWorld>
      <!-- v-slot 的简写 -->
      <template #default="{ a }">
        <button>点我</button>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",

  components: {
    HelloWorld,
  },

  data() {
    return {
      msg: "App",
    };
  },
};
</script>

<style></style>
